import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import Paging from 'components/common/paging'
import PendingCard from './component/PendingCard/index'
import NoData from 'components/common/onData'
import HeaderCard from './component/HeaderCard/index'
import { Row, Col } from 'antd'
import { v4 as uuidv110 } from 'uuid'


import './index.styl'

function WorkBench({ dispatch, workBench: { approvalPending, dailyTask } }) {

  const initPage = () => {
    const page = localStorage.getItem('workBenchPage')
    if (page) {
      return JSON.parse(page)
    }
    return 1
  }
  
  const [current, setCurrent] = useState(initPage())

  useEffect(() => {
    dispatch({
      type: 'workBench/init',
    })
  }, [dispatch])

  useEffect(() => {
    dispatch({
      type: 'workBench/getDailyTask',
      payload: {
        current,
        size: '9'
      }
    })
  }, [dispatch, current])

  const handlePageChange = (page) => {
    // dispatch({
    //   type: 'workBench/clean',
    // })
    localStorage.setItem('workBenchPage', page)
    setCurrent(page)
  }

  return (
    <div className='workBench'>
      <HeaderCard />
      <div className='pending'>
        <div className='pending-title'>待审批（{approvalPending && approvalPending.amount || 0}）</div>
        {
          dailyTask && dailyTask.records && dailyTask.records.length
          ?
          <div>
            <Row gutter={12} style={{ width: '100%' }}>
              {
                dailyTask && dailyTask.records.map(item => {
                  return (
                    <Col span={8}>
                      <PendingCard data={item} />
                    </Col>
                  )
                })
              }
            </Row>
          </div>
          : <div className='noData'>
            <NoData Title="暂无待审批任务" />
          </div>
        }
        <div>
          <Paging
            total={dailyTask && dailyTask.total}
            pageSize={9}
            pageCount={dailyTask && dailyTask.current}
            handlePageChange={handlePageChange}
            pages={dailyTask && dailyTask.pages}
          />
        </div>
      </div>
    </div>
  )
}

WorkBench.propTypes = {
  form: PropTypes.object,
  dispath: PropTypes.func,
  loading: PropTypes.object
}

export default connect(({ workBench, commonAction }) => ({
  workBench, commonAction
}))(WorkBench)

